<template>
  <div>
    <el-dialog
      :title="workTaskForm.name"
      :visible="visible"
      width="60%"
      @close="visible = false"
      :close-on-click-modal="false"
      @opened="opened()"
    >
      <el-card shadow="never">
        <div slot="header">表单数据</div>
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="0px"
          class="demo-form"
          label-position="top"
          size="mini"
          v-loading="loading"
        >
          <el-form-item label="" prop="title">
            <controlPanel ref="controlPanel" :isEdit="isEdit"></controlPanel>
          </el-form-item>
        </el-form>
      </el-card>

      <processForm :workTaskForm="workTaskForm" ref="processForm"></processForm>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="confirm" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import controlPanel from "@/views/workflows/formDesign/controlPanel.vue";
import nodeUser from "./components/nodeUser";
import { parseTime } from "@/utils/index";
import processForm from "./../workFlowSimulation/processForm";
export default {
  components: { controlPanel, nodeUser, processForm },
  props: {
    value: {
      id: 1,
    },
  },
  watch: {
    value: {
      handler() {
        //this.load();
      },
      deep: true,
    },
    visible(newVal, oldVal) {
      if (!newVal && oldVal) this.hide();
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  computed: {
    currentUserId() {
      return this.$store.state.user.user.id;
    },
    canHandle() {
      return (
        this.workHistories.filter(
          (w) =>
            w.handleUser.id === this.currentUserId &&
            w.isHandled == 0 &&
            w.workStepType == 0
        ).length > 0
      );
    },
  },
  data() {
    return {
      loading: false,
      visible: false,
      form: {
        name: "",
        formDesignId: {},
      },
      controls: [],
      selections: [],
      rules: {
        // title: [{ required: true, message: "请输入", trigger: "change" }],
        // designId: [{ required: true, message: "请选择", trigger: "change" }],
      },
      isEdit: false,
      workTaskForm: {
        id: "",
        createdUserId: "",
        entityFullName: "",
        entityKeyValue: "",
        formData: "{}",
        workTaskStatus: "",
        name: "模拟流程",
        workflowId: {},
      },
      workStep: {
        handleUser: {
          id: "",
        },
        userSelectors: [
          {
            selectorId: "",
            selectorName: "",
            selections: [],
            parameter: "",
            description: "",
            handleType: 0,
          },
        ],
        comment: "",
        stepId: "",
      },
      workHistories: [],
      isForward: false,
    };
  },
  methods: {
    opened() {
      if (this.value) this.loadData(this.value);
    },
    confirm() {
      this.commit();
    },
    show(value) {
      this.visible = true;
      this.value = value;
    },
    hide() {
      this.visible = false;
      this.form = {
        name: "",
        formDesignId: {},
        formData: {},
      };
      this.isForward = false;
    },
    loadData(value) {
      this.loading = true;
      this.getWorkTask(value).then((task) => {
        // this.loadFormInstance(task.entityKeyValue);
        this.getAllTaskStepsOfWorkTask();
        this.getAndRendWithFormDesign(task);
        this.loading = false;
      });
    },
    commit() {
      this.$emit("ok-click", {});
      this.hide();
    },

    getWorkTask(id) {
      return this.$store
        .dispatch("workflow/getWorkTask", { id: id })
        .then((res) => {
          this.workTaskForm = res;
          this.$refs.processForm.loadHistories(this.workTaskForm);
          return res;
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    loadFormInstance(id) {
      this.loading = true;
      this.$store
        .dispatch("dynamicFormInstance/get", { id: id })
        .then((res) => {
          this.form = res;
          this.getDesign(this.form.formDesignId).then((controls) => {
            this.loading = false;
            //this.$set(this.form, "formData", JSON.parse(res.formData || "{}"));
            this.$refs.controlPanel.setValue(
              controls,
              JSON.parse(res.formData || "{}")
            );
          });
        });
    },
    getAllTaskStepsOfWorkTask() {
      this.$store
        .dispatch("workflow/getAllTaskStepsOfWorkTask", {
          worktaskId: this.workTaskForm.id,
        })
        .then((res) => {
          this.workHistories = res;
          //获取当前审批的步骤
          var workStep = this.workHistories.filter(
            (w) =>
              w.handleUser.id == this.currentUserId &&
              w.isHandled == 0 &&
              w.workStepType == 0
          )[0];
          this.workStep.handleUser = workStep.handleUser;
          this.workStep.id = workStep.id;
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    callback() {
      this.loadData(this.workTaskForm.id);
    },
    passApprove() {
      this.loading = true;
      const data = {
        workTaskId: this.workTaskForm.id,
        stepId: this.workStep.id,
        comment: this.workStep.comment,
        resourceIds: "",
      };
      let _this = this;

      this.$store
        .dispatch("workflow/passProve", data)
        .then((res) => {
          _this.loading = false;
          this.callback();
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    rejectApprove() {
      this.loading = true;
      const data = {
        workTaskId: this.workTaskForm.id,
        stepId: this.workStep.id,
        comment: this.workStep.comment,
        resourceIds: "",
      };
      let _this = this;

      this.$store
        .dispatch("workflow/rejectProve", data)
        .then((res) => {
          _this.loading = false;
          this.callback();
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    forwardProve() {
      this.loading = true;
      const data = {
        workTaskId: this.workTaskForm.id,
        stepId: this.workStep.id,
        comment: this.workStep.comment,
        resourceIds: "",
        userSelectors: this.workStep.userSelectors,
      };
      let _this = this;

      this.$store
        .dispatch("workflow/forwardProve", data)
        .then((res) => {
          _this.loading = false;
          this.callback();
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    withdrawProve(stepId) {
      this.loading = true;
      const data = {
        stepId: stepId,
        comment: this.workStep.comment,
      };
      let _this = this;

      this.$store
        .dispatch("workflow/withdrawProve", data)
        .then((res) => {
          _this.loading = false;
          this.callback();
        })
        .catch((e) => {
          this.loading = false;
        });
    },

    getAndRendWithFormDesign(workTask) {
      this.loading = true;
      
      let keyValue = {}
      try {
        keyValue = JSON.parse(workTask.entityKeyValue);
      } catch (e) {
        keyValue = {};
      }
      let formData = {};
      try {
        formData = JSON.parse(workTask.formData);
      } catch (e) {
        formData = {};
      }

      this.$refs.controlPanel.setValue([], formData);

      const formDesignId = {
        ...keyValue,
        version: keyValue.versionId,
      };

      this.$store
        .dispatch("dynamicFormDesign/getFormDesignVersion", formDesignId)
        .then((res) => {
          this.loading = false;
          this.formDesign = res;
          if (res && res.designContent) {
            return JSON.parse(res && res.designContent);
          } else return [];
        })
        .then((controls) => {
          this.loading = false;
          //this.$set(this.form, "formData", JSON.parse(res.formData || "{}"));
          this.$refs.controlPanel.setValue(controls, formData);
        });
    },
  },
};
</script>

<style>
.card-provehistory .el-card__body {
  padding-top: 5px;
  padding-bottom: 5px;
}

.card-provehistory .historylabel {
  color: #999999;
}
</style>
